By CSS-Tricks
#menu li#one a, #menu li#one a:hover span {
background-image: url(images/menu_1.jpg);
height:27px;
width:161px;
}
#menu li#one a:hover span {
display: block;
position: relative;
height: 73px;
top: -46px;
z-index: 1;
background-position: center top;
}
etc...
<div id="menu">
<ul>
<li id="one"><a href="/"><span><em>One</em></span></a></li>
<li id="two"><a href="/"><span><em>Two</em></span></a></li>
<li id="three"><a href="/"><span><em>Three</em></span></a></li>
<li id="four"><a href="/"><span><em>Four</em></span></a></li>
<li id="five"><a href="/"><span><em>Five</em></span></a></li>
</ul>
</div>
Disclaimer: Feel free to download this and use it however you want. Be warned this hasn't been tested in every possible browser combination out there. Also, it might help to be a little more careful with your Photoshopping than I was.